<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>文献资源管理系统-日志管理加载示例</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
</head>
<body >
    <div class="page wrap-week">
   
        <!-- 这里是页面内容区 -->
        <div class="content">
            <div class="card card-echarts">
                <div class="card-header"><p></p></div>
                <div class="card-content">
                    <div class="card-content-inner">
                        <div id="main"  style="height: 600px; width :100%;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
   


<!-- ./wrapper -->
<script src="lib/jquery.min.js"></script>
<script src="lib/echarts.min.js"></script>
<script src="lib/walden.js"></script>

<script src="lib/mm.echarts.min.js"></script>

<script src="https://cdn.bootcss.com/vue/2.6.9/vue.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script>
<script>

var myChart = echarts.init(document.getElementById('main'));
    // 显示标题，图例和空的坐标轴
    myChart.setOption({
        // backgroundColor: '#FFF0F5',
        title: {
            text: '日志管理加载示例',
            subtext: ''
        },
        tooltip: {
            trigger: 'axis'
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        legend: {
            data:['时间','IP','内容']
        },
        toolbox: {
            show : true,
            feature : {
                mark : {show: false},
                dataView : {show: true},
                magicType : {
                    show: true, 
                    title : {},  
                    type: ['line', 'bar']
                },
                restore : {show: false},
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        xAxis: {
            type: 'category',
            name:'名称', 
            data:[],
            splitLine: {
                show: false
            }
        //     axisLine: {
        //     lineStyle: {
        //       // 设置x轴颜色
        //       color: '#912CEE'
        //     }
        //   },
        },
        yAxis: [{
            type: 'time',
            // type: 'value',
            name:'时间', 
            splitLine: {
                show: false
            }
            // axisLine: {
            //     lineStyle: {
            //     // 设置y轴颜色
            //     color: '#87CEFA'
            //     }
            // }
        }],
        dataZoom: [{
        type: 'slider',
        xAxisIndex: 0,
        filterMode: 'empty',
        start: 0,
        end: 100
            }, {
                type: 'slider',
                yAxisIndex: 0,
                filterMode: 'empty',
                start: 0,
                end: 100
            }, {
                type: 'inside',
                xAxisIndex: 0,
                filterMode: 'empty',
                start: 0,
                end: 100
            }, {
                type: 'inside',
                yAxisIndex: 0,
                filterMode: 'empty',
                start: 0,
                end: 100
            }],
        series: [{
            name: '时间',
            type: 'line',
            barWidth: '50%',
            itemStyle : {  
                normal : {  
                    color:'	#00CCFF',  
                    lineStyle:{  
                        color:'	#00CCFF',
                    },
                }  
            }, 
        },{
            name: 'IP',
            type: 'line',
            barWidth: '50%',
            itemStyle : {  
                normal : {  
                    color:'	red',  
                    lineStyle:{  
                        color:'	red',
                    },
                }  
            }, 
        },{
            name: '内容',
            type: 'line',
            barWidth: '50%',
            itemStyle : {  
                normal : {  
                    color:'	red',  
                    lineStyle:{  
                        color:'	red',
                    },
                }  
            }, 
        }]
    });
    myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画

var logName=[];    //名称数组（实际用来盛放X轴坐标值）
var logDate=[];    //登录数组（实际用来盛放Y坐标值）
var logIp=[];    //ip数组（实际用来盛放Y坐标值）
var logContent=[];    //内容数组（实际用来盛放Y坐标值）
$.ajax({
    type : "get",
    async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
    url : "http://29n01o8660.oicp.vip/server/findlogs",    //请求发送到TestServlet处
    data : {},
    dataType : "json",        //返回数据形式为json
    success : function(result) {
        // alert(JSON.stringify(result))
        //请求成功时执行该函数内容，result即为服务器返回的json对象
        if (result) {
            for(var i=0;i<result.length;i++){
                logName.push(result[i].logName);    //挨个取出名称并填入名称数组
            }
            for(var i=0;i<result.length;i++){
                logDate.push(result[i].logDate);    //挨个取出登录并填入登录数组
            }
            for(var i=0;i<result.length;i++){
                logIp.push(result[i].logIp);    //挨个取出ip并填入ip数组
            }
            for(var i=0;i<result.length;i++){
                logContent.push(result[i].logContent);    //挨个取出ip并填入ip数组
            }
            myChart.hideLoading();    //隐藏加载动画
            myChart.setOption({        //加载数据图表
                tooltip: {
                    trigger: 'axis',
                    formatter: function(logName, logDate,logIp,logContent) {

                        var res = logName[0].name;

                        for (var i = 0, l = logName.length; i < l; i++) {
                            if (logName[i].seriesType === 'line') {
                                res += '<br/>' + logName[i].seriesName + ' : ' + (logName[i].value ? logName[i].value : '-');
                            } else {
                                res += '<br/>' + logName[i].seriesName + ' : ' + (logName[i].value ? logName[i].value : '-');
                            }
                        }
                        return res;
                    }
                },
                xAxis: {
                    data: logName
                },
                series: [{
                    // 根据时间对应到相应的系列
                    name:'时间',
                    data: logDate,
                    label: {
                    normal: {
                        show: true,
                        position: 'top',
                    }
                },
                lineStyle: {
                    normal: {
                        width: 3,
                        shadowColor: 'rgba(0,0,0,0.4)',
                        shadowBlur: 10,
                        shadowOffsetY: 10
                    }
                },
                },{
                    // 根据IP对应到相应的系列
                    data: logIp,
                    label: {
                    normal: {
                        show: true,
                        position: 'top',
                    }
                },
                },{
                    // 根据内容对应到相应的系列
                    data: logContent,
                    label: {
                    normal: {
                        show: true,
                        position: 'top',
                    }
                },
                }
                ]
            });
        }
    },
    error : function(errorMsg) {
        //请求失败时执行该函数
        alert("图表请求数据失败!");
        myChart.hideLoading();
    }
})

</script>

</body>
</html>